import { Form, Button, Toast, Input } from "antd-mobile"
import { useRef } from 'react'
import { reg } from "../../util/reg";
import { FormInstance } from "antd-mobile/es/components/form";
import { PassCom } from "../../components/PassCom";
import { Link } from "react-router-dom";
import { postLogin } from "../../api/user";
import { useLocalStorageState } from "ahooks";
import { useTiaoZhuan } from "../../hooks/routers";
import { AppDispatch } from "../../types/store";
import { useDispatch } from "react-redux";
import { getUserInfo } from "../../rtk/reduers/data";


export const PassLogin = () => {
    const formRef = useRef<FormInstance>({} as FormInstance)
    const [token,settoken] = useLocalStorageState('token')
    const [phoneData,setphoneData] = useLocalStorageState('phone')
    const dispatch:AppDispatch = useDispatch()
    const {Tz} = useTiaoZhuan()
    const onFinish = async(value:{phone:string,password:string}) => {
        let res =await postLogin(value.phone,value.password)

        
        if(res.code ==200){
            settoken(res.token)
            setphoneData(res.result.phone)
            const router = localStorage.getItem('frompath')?.replaceAll('"','')
            await dispatch(getUserInfo())
            if(router == '/addms'){
                Tz(router!)
            }else if(/detail/.test(router!)){
                Tz(router!)
            }else{
                Tz('/homes/my')
            }
        }else{
            Toast.show({
                content:"手机密码不匹配"
            })
        }
        
    }
    return (
        <div>
            <Form
                style={{ padding: "0 10px", fontSize: '14px' }}
                ref={formRef}
                onFinish={onFinish}
                onFinishFailed={() => Toast.show({
                    content: '表单验证失败',
                })}
                layout='horizontal'
                footer={
                    <div >
                        <Button
                        style={{marginBottom:'10px'}}
                            block
                            color='primary'
                            type='submit'
                            size='middle'
                        >
                            登录
                        </Button>
                        <Button
                            block
                            color='danger'
                            type='reset'
                            size='middle'
                        >
                            重置
                        </Button>
                    </div>

                }>
                <Form.Item
                    name='phone'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }, { pattern: reg.phone, message: '手机格式不正确' }]}
                    help='11位手机号'
                >
                    <Input placeholder='请输入手机号' />
                </Form.Item>
                <PassCom />
                <Form.Item>
                    <div className="links">
                        <Link to='/reg' style={{ color: '#f50' }}>注册</Link>
                        <Link to='/findpass'>找回密码</Link>
                    </div>
                </Form.Item>
            </Form>
        </div>
    )
}